<template>
  <div class="parent">
    <px-tooltip class="box-item" effect="dark" content="导出图片" placement="bottom">
      <px-icon class="downImg" color="#3b82f6" @click="saveImg"><Download /></px-icon>
    </px-tooltip>
    <echartsDom v-if="isShowEcharts" :width="width" :height="height" :option="option" :name="`检测报表`" />
    <div v-else>
      <px-empty :image-size="50" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref, watch } from "vue";
import echartsDom from "./echartsDom.vue";
const childRef = ref(null);
const saveImg = () => {
  childRef.value.saveImg();
};
import { queryConsumeChartForDay } from "@/api/waterKanban";
const props = defineProps({
  width: {
    type: String,
    default: ""
  },
  height: {
    type: String,
    default: ""
  },
  color: {
    type: String,
    default: "#3B82F6"
  },
  chartvlue: {
    type: Object,
    default: () => {},
    required: true
  },
  systemCode: {
    type: String,
    default: ""
  }
});
const isShowEcharts = ref(true);
const state = reactive({
  option: {},
  series: []
});
const { option, series } = toRefs(state);
const getoptions = () => {
  if (props.systemCode === "CS") {
    series.value = props.chartvlue.details?.map(item => {
      return {
        name: item.itemName,
        data: item?.detailsActual?.map(item => {
          let date = new Date(item.xaxis);
          return [date, Number(item.value)];
        }),
        type: "line",
        showLine: false // 关闭折线显示
      };
    });
  } else {
    series.value = [
      {
        name: props.chartvlue.itemName,
        data: props.chartvlue.detailsActual.map(item => {
          let date = new Date(item.xaxis);
          return [date, Number(item.value)];
        }),
        type: "line",
        showLine: false // 关闭折线显示
      }
    ];
  }
  option.value = {
    grid: {
      left: "20px",
      top: "40px",
      right: "30px",
      bottom: "10px",
      containLabel: true
    },
    legend: {
      x: "center",
      type: "scroll",
      width: "75%"
    },
    tooltip: {
      trigger: "axis",
      confine: true,
      enterable: true,
      extraCssText: "max-height:80%;overflow:auto"
      // position: function (point, params, dom, rect, size) {
      //   return [point[0], point[1]];
      // }
    },
    dataZoom: [
      {
        show: false,
        start: 0,
        end: 100
      },
      {
        type: "inside",
        start: 0,
        end: 100
      },
      {
        show: false,
        yAxisIndex: 0,
        filterMode: "empty",
        width: 30,
        height: "80%",
        showDataShadow: false,
        left: "93%"
      }
    ],
    xAxis: {
      type: "time",
      // boundaryGap: false
      axisLabel: {
        // 时间格式化显示
        // formatter: function (value) {
        //   const date = new Date(value);
        //   // 中文月份映射
        //   const monthNames = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];

        //   // 当刻度为月份第一天时显示中文月份
        //   if (date.getDate() === 1) {
        //     return monthNames[date.getMonth()];
        //   }
        //   // 其他情况显示小时
        //   return date.getHours() + ":00";
        // },
        // 确保月份标签有足够空间
        rich: {
          month: {
            fontWeight: "bold",
            color: "#333"
          }
        }
      }
    },
    yAxis: {
      name: props.chartvlue.unit,
      type: "value"
    },
    series: series.value
  };
};
watch(
  () => props.chartvlue,
  newOption => {
    getoptions();
  },
  { immediate: true }
);
</script>

<style scoped lang="scss">
.parent {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}

.downImg {
  position: absolute;
  top: -40px;
  right: 0;
  cursor: pointer;
}
</style>
